<template>
    <!-- 使用 Element UI 的卡片组件，设置底部外边距为 20px，鼠标悬停时显示阴影 -->
    <el-card class="mb-20" shadow="hover">
        <!-- 卡片头部模板 -->
        <template #header>
            <!-- 卡片标题 -->
            <span>入库单申请</span>
            <!-- 点击此按钮调用 openAddModal 方法打开新增物品的模态框 -->
            <el-button type="primary" icon="el-icon-plus" @click="openAddModal">入库物品</el-button>
        </template>
        <!-- 表单，绑定 form 数据对象，标签宽度为 120px，设置引用为 form -->
        <el-form :model="form" label-width="120px" ref="form">
            <!-- 表单仓库名称项 -->
            <el-form-item label="仓库名称">
                <!-- 下拉选择框，绑定仓库名称到 form.warehouseName -->
                    <el-select v-model="form.warehouseName" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.repositoryName"
                            :value="item.id">
                        </el-option>
                    </el-select>
            </el-form-item>
            <!-- 表单供应商项 -->
            <el-form-item label="供应商">
                <!-- 输入框，绑定供应商名称到 form.supplier -->
                <el-input v-model="form.supplier" placeholder="请输入供应商名称"></el-input>
            </el-form-item>
            <!-- 表单入库物品项 -->
            <el-form-item label="入库物品">
                <!-- 表格，展示入库物品列表，绑定数据到 form.items -->
                <el-table :data="form.items" stripe border style="width: 100%">
                    <!-- 物品名称列 -->
                    <el-table-column prop="name" label="物品名称"></el-table-column>
                    <!-- 物品数量列 -->
                    <el-table-column prop="quantity" label="数量">
                        <!-- 单元格模板，使用数字输入框，绑定数量到当前行的 quantity 属性 -->
                        <template #default="scope">
                            <el-input-number v-model="scope.row.quantity" :min="1"></el-input-number>
                        </template>
                    </el-table-column>
                    <!-- 物品单位列 -->
<!--                    <el-table-column prop="unit" label="单位"></el-table-column>-->
                    <!-- 操作列 -->
                    <el-table-column label="操作">
                        <!-- 单元格模板，点击删除按钮调用 deleteItem 方法删除当前行 -->
                        <template #default="scope">
                            <el-button type="danger" icon="el-icon-delete" @click="deleteItem(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <!-- 表单备注项 -->
            <el-form-item label="备注">
                <!-- 文本域输入框，绑定备注信息到 form.remark -->
                <el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息"></el-input>
            </el-form-item>
            <!-- 表单按钮区域，右对齐 -->
            <div class="text-right">
                <!-- 点击提交申请按钮调用 submitApply 方法提交表单 -->
                <el-button type="primary" @click="submitApply">提交申请</el-button>
                <!-- 点击重置按钮调用 resetForm 方法重置表单 -->
                <el-button @click="resetForm">重置</el-button>
            </div>
        </el-form>
        <!-- 新增物品模态框，通过 addModalVisible 控制显示和隐藏 -->
        <el-dialog :visible.sync="addModalVisible" title="选择物品">
            <!-- 输入框，用于输入搜索关键词，输入时调用 searchItems 方法进行搜索 -->
            <el-input v-model="searchKeyword" placeholder="请输入物品名称进行搜索" @input="searchItems" style="width: 60%">搜索</el-input>
            <!-- 表格，展示搜索结果，绑定数据到 paginatedItems -->
            <el-table :data="allItems" stripe border style="width: 100%">
                <!-- 物品名称列 -->
                <el-table-column prop="productsName" label="物品名称"></el-table-column>
                <!-- 物品单位列 -->
                <el-table-column prop="procureCount" label="数量"></el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作">
                    <!-- 单元格模板，点击选择按钮调用 selectItem 方法选择当前物品 -->
                    <template #default="scope">
                        <el-button type="primary" @click="selectItem(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-footer>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="ListPage"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-footer>
            <!-- 模态框底部模板 -->
            <template #footer>
                <!-- 点击取消按钮关闭模态框 -->
                <el-button @click="addModalVisible = false">取消</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            // 表单数据对象
            form: {
                // 仓库名称，初始为空
                warehouseName: '',
                // 供应商名称，初始为空
                supplier: '',
                // 入库物品列表，初始有一个空物品项
                items: [
                    { name: '', quantity: 1 },
                ],
                // 备注信息，初始为空
                remark: '',
            },
            options:[],
            // 新增物品模态框显示状态，初始为隐藏
            addModalVisible: false,
            // 搜索关键词，初始为空
            searchKeyword: '',
            // 所有可选择的物品列表
            allItems: [],
            // 过滤后的物品列表，初始为空
            filteredItems: [],
            current: 1, // 初始化当前页码
            size: 10, // 初始化每页数量
            ListPage: [10, 20, 30, 40, 50],
            total: 0,
        };
    },
    computed: {
        // 计算当前页要显示的物品列表
        // paginatedItems() {
        //     const start = (this.current - 1) * this.size;
        //     const end = start + this.size;
        //     console.log('当前页数据截取范围:', start, end);
        //     console.log('过滤后的物品列表长度:', this.filteredItems.length);
        //     return this.filteredItems.slice(start, end);
        // },
    },
    methods: {
        // 打开新增物品模态框的方法
        openAddModal() {
            // 显示模态框
            this.addModalVisible = true;
            // 清空搜索关键词
            this.searchKeyword = '';
            // 重新获取最新数据
            this.search();
        },
        // 搜索物品的方法
        searchItems() {
            const keyword = this.searchKeyword.toLowerCase();
            this.filteredItems = this.allItems.filter(item =>
                item.productsName.toLowerCase().includes(keyword)
            );
            this.current = 1; // 搜索时重置到第一页
        },
        // 选择物品的方法
        selectItem(item) {
            // 创建一个新的物品对象，数量初始为 1
            const newItem = { name: item.productsName, quantity: 1, unit: item.procureCount };
            // 将新物品添加到入库物品列表中
            this.form.items.push(newItem);
            // 关闭模态框
            this.addModalVisible = false;
        },
        // 手动添加空物品项的方法
        addItem() {
            // 向入库物品列表中添加一个空物品项
            this.form.items.push({ name: '', quantity: 1, unit: '' });
        },
        // 删除物品项的方法
        deleteItem(index) {
            // 弹出确认删除提示框
            this.$confirm('确认删除该物品吗？', '提示', {
                type: 'warning',
            })
                .then(() => {
                    // 确认后从入库物品列表中删除指定索引的物品项
                    this.form.items.splice(index, 1);
                })
                .catch(() => {
                    // 处理用户取消删除的情况，这里可以添加一些提示或其他逻辑
                    this.$message.info('已取消删除操作');
                });
        },
        // 提交申请的方法
        submitApply() {

        },
        // 重置表单的方法
        resetForm() {
            // 重置表单字段
            this.$refs.form.resetFields();
            // 重置入库物品列表为初始状态
            this.form.items = [
                { name: '', quantity: 1, unit: '' },
            ];
        },
        search() {
            const procureVo = {};
            console.log('当前页码:', this.current);
            console.log('每页数量:', this.size);
            // 假设后端需要 currentPage 和 pageSize 作为路径参数，调整路径变量名
            this.$axios.post(`/procure/selectAll2/${this.current}/${this.size}`, procureVo)
                .then(r => {
                    console.log('后端返回的数据:', r.data);
                    this.allItems = r.data.list || [];
                    this.total = r.data.total || 0;
                })
                .catch((error) => {
                    this.$message.error('获取入库物品数据失败，请联系系统管理员检查后端接口！');
                    console.error('Axios 请求错误详情:', error.response ? error.response.data : error.message);
                });
        },
        handleSizeChange(val) {
            this.size = val;
            this.current = 1; // 切换每页数量后重置页码
            this.search();
        },
        handleCurrentChange(val) {
            this.current = val;
            this.search();
        },

        search2() {
            this.$axios.post(`repository/selectAll`).then((r) => {
                console.log('仓库列表数据：', r.data);
                // 直接判断 r.data 是否为数组
                if (Array.isArray(r.data)) {
                    this.options = r.data.map((item) => ({
                        id: item.id, // 假设 id 是仓库唯一标识，作为 option 的 value
                        repositoryName: item.repositoryName // 作为 option 的显示标签
                    }));
                } else {
                    console.error('后端返回数据结构不符合预期，非数组格式');
                }
            }).catch((error) => {
                console.error('获取仓库数据失败:', error);
            });
        }
    },
    created() {
        this.search();
        this.search2();
    }
};
</script>

<style scoped>
/* 底部外边距为 20px 的样式类 */
.mb-20 {
    margin-bottom: 20px;
}
/* 文本右对齐的样式类 */
.text-right {
    text-align: right;
}
</style>